<template>
    <div class='container'>

        <t-head-menu v-model="default_menu" theme="light" @change="changeHandler">
            <template #logo>
                <div class="logo">
                    <t-avatar><template #content><t-icon name="user-1" size="26px" /></template></t-avatar>
                    <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" />
                    <t-popup placement="bottom-right" trigger="hover" showArrow>
                        <t-icon name="menu-application" size="26px" />
                        <template #content>
                            <AppMenu @child-event="handleChildEvent" />
                        </template>
                    </t-popup>
                </div>
            </template>
            <t-menu-item v-for="item in currentMenu" :key="item.value" :value="item.value" :to="item.router"> {{
                item.name }}
            </t-menu-item>
            <template #operations>

                <t-button variant="text" shape="square">
                    <template #icon><t-icon name="mail" /></template>
                </t-button>
                <t-button variant="text" shape="square">
                    <template #icon><t-icon name="user" /></template>
                </t-button>
                <t-button variant="text" shape="square">
                    <template #icon><t-icon name="ellipsis" /></template>
                </t-button>
            </template>
        </t-head-menu>
        <RouterView />
    </div>
</template>
<script setup lang='ts'>
import { ref, watch, onMounted } from 'vue';
import type { AppItemType, MenuItemType } from '@/types/menu';
import { apps_name_mock, menu_items_mock } from '@/api/mock'
import AppMenu from '@/components/HeadMenu/AppMenu.vue'
import type { HeadMenuProps } from 'tdesign-vue-next';

const default_menu = ref();
const currentApp = ref<AppItemType>();
const currentMenu = ref<MenuItemType[]>([])
const changeHandler: HeadMenuProps['onChange'] = (active) => {
    console.log('change', active);
};


watch(() => currentApp.value, (newVal) => {
    console.log("currentApp", newVal);
    if (newVal) {
        currentMenu.value = menu_items_mock.filter(item => item.label === newVal.label)
        default_menu.value = currentMenu.value[0].value
    }

})
const handleChildEvent = (app: AppItemType) => {
    console.log(app);
    currentApp.value = app
}
onMounted(() => {
    currentApp.value = apps_name_mock[0]
})
</script>
<style lang='scss' scoped>
.container {
    background-color: #dbd6d6;
    border-radius: 5px;

    .logo {
        margin-left: 30px;

    }
}
</style>